<template>
  <div v-loading="isloading" class="empower-container">
    <div class="over-header">
      <div class="header"><i class="el-icon-d-arrow-right"></i>按条件筛选</div>

      <div style="display: flex; align-items: center;padding-top:10px;padding-left:10px">
        <el-input
          v-model="listquery.key"
          clearable
          placeholder="标题内容搜索"
          style="width: 200px;margin-right:10px"
        ></el-input>

        <el-date-picker
          style="width: 400px;margin-right:10px"
          v-model="valueData"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="filter-item"
          value-format="yyyy-MM-dd"
        />

        <el-input
          v-model="listquery.userName"
          clearable
          placeholder="问题提出单位"
          style="width: 200px;margin-right:10px"
        ></el-input>

        <el-select
          v-model="listquery.ListType"
          placeholder="回执状态"
          clearable=""
           style="width: 100px;margin-right:10px"
        >
          <el-option label="未回执" value="1"> </el-option>
          <el-option label="已回执" value="2"> </el-option>
          <el-option label="全部" value=""> </el-option>
        </el-select>
        <el-button type="success" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
        <el-button type="warning" icon="el-icon-refresh-left" @click="reset"
          >重置</el-button
        >
      </div>
    </div>

    <div class="tableheader">
      <div class="header">
        <i class="el-icon-d-arrow-right"></i
        ><span style="color: #4778c7">市县问题反馈记录</span>
      </div>
    </div>

    <el-table
      :data="tableData"
      stripe
      border
      tooltip-effect="dark"
      style="width: 100%"
      class="eltable"
    >
      <el-table-column label="序号" width="80" type="index" />
      <el-table-column
        prop="feedbackUserName"
        label="问题提出单位"
        width="200"
      />
      <el-table-column prop="feedbackTitle" label="问题标题" width="400" />
      <el-table-column label="问题提出时间" width="250">
        <template slot-scope="scope">
          <span>{{ scope.row.feedbackTime | parseTime("{y}-{m}-{d}") }}</span>
        </template>
      </el-table-column>

      <el-table-column label="回执状态" width="250">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.receiptUserId">已回复</el-tag>
          <el-tag type="danger" v-else>未处理</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button type="primary" @click="opendialog(scope.row)">
            查看 | 编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="tableData.length > 0"
      class="elpagi"
      :total="total"
      @size-change="getdata"
      @current-change="getdata"
      @prev-click="getdata"
      @next-click="getdata"
      :current-page.sync="listquery.currentPage"
      :page-sizes="[10, 20]"
      :page-size.sync="listquery.pageSize"
      layout="total,sizes, prev, pager, next, jumper"
    />
    <el-dialog
      title="回执详情"
      :visible.sync="isDialogShow"
      width="70%"
      :append-to-body="true"
      class="dialog1"
    >
      <el-form
        ref="feedbackform"
        :model="feedbackform"
        label-width="150px"
        label-position="left"
      >
        <el-row>
          <el-col
            :sm="12"
            :md="12"
            :lg="12"
            :xl="12"
            style="padding-right: 25px"
          >
            <div class="feedtitle">问题详情</div>
            <el-form-item label="标题:">
              <span>{{ feedbackform.feedbackTitle }}</span>
            </el-form-item>
            <el-form-item label="内容:">
              <div style="max-height: 155px; overflow: auto">
                {{ feedbackform.feedbackMessage }}
              </div>
            </el-form-item>
            <el-form-item label="问题反馈地区:">
              <span>{{ feedbackform.feedbackUserName }}</span>
            </el-form-item>
            <el-form-item label="反馈日期:">
              <span>{{ feedbackform.feedbackTime }}</span>
            </el-form-item>
            <el-form-item label="文件列表:">
              <ul class="infinite-list" style="overflow: auto">
                <li v-for="i in flist" class="infinite-list-item" :key="i">
                  <a :href="sethref(i)" class="feedhover">{{ i }}</a>
                </li>
              </ul>
            </el-form-item>
          </el-col>
          <el-col :sm="12" :md="12" :lg="12" :xl="12">
            <div class="feedtitle">回执</div>
            <el-form-item label="标题:">
              <el-input v-model="feedbackform.receiptTitle" />
            </el-form-item>
            <el-form-item label="内容:">
              <el-input
                v-model="feedbackform.receiptMessage"
                type="textarea"
                :rows="8"
              />
            </el-form-item>
            <el-form-item label="回执文件:">
              <el-upload
                ref="upload"
                class="upload-demo demo1"
                action=""
                multiple
                :show-file-list="true"
                :file-list="fileList"
                :http-request="fileSubmit"
                :on-change="fileChange"
                :on-remove="fileRemove"
              >
                <div class="wrap">
                  <span class="fujian"
                    ><i class="el-icon-paperclip"></i>新增附件</span
                  >
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item v-if="rlist.length > 0">
              <span slot="label">
                <span class="span-box">
                  <span> 历史附件: </span>
                </span>
              </span>
              <ul class="infinite-list" style="overflow: auto">
                <li v-for="i in rlist" class="infinite-list-item" :key="i">
                  <a :href="sethref(i)" class="feedhover">{{ i }}</a>
                  <span class="close" @click="closeli(i)"
                    ><i class="el-icon-close"></i
                  ></span>
                </li>
              </ul>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="editfeedback">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getrlist, edit } from "@/api/feedback.js";
import openMixin from "@/mixins/open.js";
import queryMixin from "@/mixins/countquery.js";

export default {
  data() {
    return {
      listquery: {
        pageSize: 10,
        currentPage: 1,
        ListType: null,
        key: "",
        userName: "",
        startDate: null,
        endDate: null,
      },
      isloading: false,
      tableData: [],
      form: {},
      feedbackform: {},
      isDialogShow: false,
      flist: [],
      rlist: [],
      rules: [],
      valueData: [],
      dialogStatus: "edit",
      fileList: [],
      files: [],
    };
  },
  mounted() {
    this.getdata();
  },
  mixins: [openMixin, queryMixin],

  methods: {
     search() {
      this.listquery.currentPage = 1
         this.listquery.pageSize=10
      this.getdata();
    },
     reset() {
      this.listquery = {
        pageSize: 10,
        currentPage: 1,
        ListType: null,
        key: "",
        userName: "",
        startDate: null,
        endDate: null,
      };
    },

    editfeedback() {
      let data = new FormData();
      this.files.forEach((element) => {
        data.append("upReceiptFiles", element);
      });

      Object.keys(this.feedbackform).map((k) => {
        let v = this.feedbackform[k];
        data.append(k, v);
      });
      data.set("receiptFiles", this.rlist.toString());
      data.delete("feedbackTime");
      data.delete("receiptTime");
      edit(data)
        .then((res) => {
          if (res.success) {
            this.$message({
              message: "发送回执成功",
              type: "success",
            });
            this.files = [];
            this.fileList = [];
            this.getdata();

            this.isDialogShow = false;
          } else {
            this.$notify.error({
              title: "发送回执失败",
              message: res.message,
            });
          }
        })
        .catch((err) => {
          this.$notify.error({
            title: "失败",
            message: "服务忙，请稍后再试",
          });
        });
    },
    opendialog(row) {
      this.flist = [];
      this.rlist = [];
      if (row.feedbackFiles) {
        this.flist = row.feedbackFiles.split(",").map((v) => {
          return v;
        });
      }
      if (row.receiptFiles) {
        this.rlist = row.receiptFiles.split(",").map((v) => {
          return v;
        });
      }
      this.feedbackform = Object.assign({}, row); // copy obj
      this.dialogStatus = "edit";
      this.isDialogShow = true;
      this.$nextTick(() => {
        this.$refs["feedbackform"].clearValidate();
      });
    },
    handleDelete(id) {
      handleCofirm("确认要删除吗？", "warning").then((res) => {
        del(id)
          .then((v) => {
            this.getdata();
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
            });
          })
          .catch((error) => {
            this.$notify.error({
              title: "错误",
              message: error,
            });
          });
      });
    },
    fileSubmit(data) {
      this.files.push(data.file);
    },
    fileRemove(file, fileList) {
      this.files = [];
    },
    fileChange() {},
    closeli(item) {
      this.rlist.remove(item);
    },
    async getdata() {
      if (this.valueData !== null) {
        this.listquery.startDate = this.valueData[0];
        this.listquery.endDate = this.valueData[1];
      } else {
        this.listquery.startDate = null;
        this.listquery.endDate = null;
      }
      let res = await getrlist(this.listquery);
      this.tableData = res.data.content;
      this.total = res.data.totalElements;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../public/css/table.scss";
.feedtitle {
  padding: 10px 0px;
  border-bottom: 1px dashed #ccc;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 18px;
  color: #4778c7;
}
.feedhover {
  font-weight: 700;
}
.feedhover:hover {
  color: #4778c7;
}
.header {
  line-height: 35px;
  margin-right: 5px;

  i {
    color: #4778c7;
    margin-right: 5px;
  }
}
.infinite-list li {
  display: flex;
  justify-content: space-between;
}
.more {
  color: #4cc8c7;
  margin-left: 10px;
  &:hover {
    color: orange;
  }
}
.close {
  color: red;
}
.tableheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}

.over-header {
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 15px;

  .header {
    border-bottom: 1px dashed #ccc;
  }

  .search {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
  }
}
</style>